<template>
  <div class="container">
    <el-dialog
      title="分类搜索"
      :visible.sync="classdialog.centerDialogVisible"
      width="700px"
      center
      :lock-scroll="true"
      @open="getData"
    >
      <!-- <div class="top">
        <el-select v-model="search.select" @change="clickSeelct">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input style="width:200px;margin:0 10px" v-model="search.value" placeholder="请输入内容"></el-input>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          class="handleSearch"
          @click="handleSearch()"
        >查询</el-button>
      </div> -->
      <el-tree
        :data="formData"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        :props="defaultProps"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { goodsClassTree } from "@/api/superSettlement/settlementList"; //类别
export default {
  props: {
    classdialog: Object
  },
  data() {
    return {
      formData: null,
      options: [
        {
          value: "",
          label: "分类ID"
        },
        {
          value: "1",
          label: "分类名称"
        }
      ],
      search: {
        select: "",
        value: ""
      },
      defaultProps: {
        children: "child",
        label: "Name"
      },
      tags: []
    };
  },

  methods: {
    handleSearch() {
      this.formData = [];
      this.getData();
    },
    getData() {
      this.formData = [];

      let data = {};
      switch (this.search.select) {
        case "":
          data = {
            productclass_id: this.search.value,
            name: "",
            limit: 1000
          };
          break;
        case "1":
          data = {
            productclass_id: "",
            name: this.search.value,
            limit: 1000
          };
          break;
      }
      goodsClassTree(data).then(res => {
        if (res.code == 0) {
          this.formData = res.data.tree;
        }
      });
    },
    clickSeelct() {
      this.search.value = "";
    },
    //确定
    confirm() {
      let data = this.$refs.tree.getCheckedNodes();
      this.tags = [];
      data.forEach(res => {
        this.tags.push({
          name: res.Name,
          code: res.Code,
          id: res.ProductClassId,
        });
      });
      this.$emit("tag", this.tags);
      this.cancel();
    },
    //取消
    cancel() {
      this.search.value = '';
       this.formData = [];
       this.$refs.tree.setCheckedKeys([]);
      this.classdialog.centerDialogVisible = false;
    },
    //选取
    handleSelectionChange(val) {}
  }
};
</script>
<style scoped>
.top {
  display: flex;
  /* justify-content: center; */
}
</style>